import { useNode } from '@craftjs/core';
import { Collapse, Radio, type TabsProps, Typography } from 'antd';

export const Settings = () => {
  const {
    actions: { setProp },
    size = 'middle',
    tabPosition = 'top',
  } = useNode<TabsProps>((node) => ({
    ...node.data.props,
  }));

  return (
    <>
      <Typography.Title level={3}>Tabs Settings</Typography.Title>
      <Collapse activeKey={['1', '2']}>
        <Collapse.Panel header="Tabs Size" key={'1'}>
          <Radio.Group
            value={size}
            onChange={(e) =>
              setProp((props: TabsProps) => (props.size = e.target.value))
            }
          >
            <Radio value={'large'}>Large</Radio>
            <Radio value={'middle'}>middle</Radio>
            <Radio value={'small'}>small</Radio>
          </Radio.Group>
        </Collapse.Panel>
        <Collapse.Panel header="Tabs Position" key={'2'}>
          <Radio.Group
            block
            value={tabPosition}
            onChange={(e) =>
              setProp(
                (props: TabsProps) => (props.tabPosition = e.target.value),
              )
            }
          >
            <Radio.Button value={'top'}>Top</Radio.Button>
            <Radio.Button value={'right'}>Right</Radio.Button>
            <Radio.Button value={'bottom'}>Bottom</Radio.Button>
            <Radio.Button value={'left'}>Left</Radio.Button>
          </Radio.Group>
        </Collapse.Panel>
      </Collapse>
    </>
  );
};
